import * as zrender from "zrender";

const getCircle = (config) => {
  const defaultOption = {
    shape: {
      cx: config.cx,
      cy: config.cy,
      r: config.r
    },
    z: config.z ? config.z : 0,
    style: {
      fill: config.fill ? config.fill : '#4691EE',
      stroke: config.stroke ? config.stroke : '#cccccc',
      lineWidth: config.lineWidth ? config.lineWidth : 3,
    }
  }
  return new zrender.Circle(defaultOption);
}

const getImage = (config) => {
  const defaultOption = {
    z: config.z ? config.z : 0,
    style: {
      image: config.image,
      x: config.x - config.width / 2,
      y: config.y + config.height / 2,
      width: config.width,
      height: config.height,
    }
  }
  return new zrender.Image(defaultOption);
}

const getLine = (config) => {
  const defaultOption = {
    shape: {
      x1: config.x1,
      y1: config.y1,
      x2: config.x2,
      y2: config.y2,
      percent: config.percent,
    },
    z: config.z ? config.z : 0,
    style: {
      fill: config.fill ? config.fill : '#ccc',
      // stroke: config.stroke ? config.stroke : '#cccccc',
      lineDash: config.lineDash ? config.lineDash : '',
      lineWidth: config.lineWidth ? config.lineWidth : 1,
    }
  }
  return new zrender.Line(defaultOption);
}

const getText = (config) => {
  const defaultOption = {
    x: config.x,
    y: config.y,
    z: config.z ? config.z : 0,
    style: {
      text: config.text,
      fill: config.fill ? config.fill : '#4691EE',
      align: 'center',
      verticalAlign: 'center',
    }
  }
  return new zrender.Text(defaultOption);
}

export { getText, getLine, getImage, getCircle };
